<template>
  <!-- <Popup>
    <div v-if="detail.type == 'column'">{{ detail.label }}</div>
    <div v-if="detail.type == 'belongsTo'">{{ detail.label }}</div>
    <div v-if="detail.type == 'hasOne'">{{ detail.label }}</div>
    <div v-if="detail.type == 'hasMany' || detail.type == 'habtm'">
      <ElCard :header="detail.name">
        <div v-for="label in detail.values">{{ label }}</div>
      </ElCard>
    </div>
    <template #footer="{ close }">
      <div class="flex justify-center items-center">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </Popup> -->
  <ActionPanel :loading="loading">
    <div v-if="id && data">
      <div v-if="data.type == 'column'">{{ data.label }}</div>
      <div v-else-if="data.type == 'belongsTo'">{{ data.label }}</div>
      <div v-else-if="data.type == 'hasOne'">{{ data.label }}</div>
      <div v-else-if="data.type == 'hasMany' || data.type == 'habtm'">
        <ElCard :header="data.name">
          <div v-for="label in data.values">{{ label }}</div>
        </ElCard>
      </div>
    </div>
    <ElEmpty v-else description="数据不存在" class="full" />
    <template #footer>
      <el-button v-if="close" @click="close">关闭</el-button>
    </template>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { ElButton, ElCard, ElEmpty } from 'element-plus'
  import { closePopupKey } from '@/components/Popup'
  import { GetVO } from '@/seed-application/types'
  import { getAction } from '@/seed-application';
  import { inject, onMounted, ref } from 'vue';
  import { ActionPanel } from '@/components/ActionPanel';
  import { getApi } from '@/seed-application/api';

  const props = defineProps<{actionName: string, seedName?: string, microName?: string, id: string}>()
  const action = getAction(props.actionName, props.seedName, props.microName)

  const close = inject<() => void>(closePopupKey, void 0)

  const data = ref<GetVO>()
  const loading = ref(false)
  onMounted(async () => {
    if(props.id) {
      try {
        loading.value = true
        data.value = await getApi(action, props.id)
      } finally {
        loading.value = false
      }
    }
  })
</script>